<template>
  <div class="deviceDetails" v-cloak>
    <scroller class="scroller">
    <div class="listContent">
      <ul class="list" v-if="type == '1'">
        <li class="listItem">
          <label class="specials">
            <text class="special"></text>
            <text class="textSP">设备详情</text>
          </label>
        </li>
        <li class="listItem">
          <text class="text">设备地点编号:</text>
          <text class="text">{{sbxq.DDID}}</text>
        </li>
        <li class="listItem">
          <text class="text">供暖房间:</text>
          <text class="text">{{sbxq.MQQNFS}}</text>
        </li>
        <li class="listItem">
          <text class="text">设计建议:</text>
          <text class="text">{{sbxq.SJJY}}</text>
        </li>
        <li class="listItem">
          <text class="text">设计图片地址:</text>
          <text class="text">{{sbxq.SJTPATH}}</text>
        </li>
        <li class="listItem">
          <text class="text">设计图片名称:</text>
          <text class="text">{{sbxq.SJTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装状态:</text>
          <text class="text">{{sbxq.ZTBS}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装位置:</text>
          <text class="text">{{sbxq.JZAZWZ}}</text>
        </li>
        <li class="listItem">
          <text class="text">建筑结构:</text>
          <text class="text">{{sbxq.JZJG}}</text>
        </li>
        <li class="listItem">
          <text class="text">水泵型号:</text>
          <text class="text">{{sbxq.SBXH}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装日期:</text>
          <text class="text">{{sbxq.AZRQ}}</text>
        </li>
        <li class="listItem">
          <text class="text">供暖面积:</text>
          <text class="text">{{sbxq.ZJDMJ}}</text>
        </li>
        <li class="listItem">
          <text class="text">平面图名称:</text>
          <text class="text">{{sbxq.PMTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">建筑层高:</text>
          <text class="text">{{sbxq.JZCG}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备型号:</text>
          <text class="text">{{sbxq.SBXHMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">外墙厚度:</text>
          <text class="text">{{sbxq.WQHD}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备ID:</text>
          <text class="text">{{sbxq.SBID}}</text>
        </li>
        <li class="listItem">
          <text class="text">使用能源:</text>
          <text class="text">{{sbxq.SYNYMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">经度:</text>
          <text class="text">{{sbxq.JD}}</text>
        </li>
        <li class="listItem">
          <text class="text">纬度:</text>
          <text class="text">{{sbxq.WD}}</text>
        </li>
        <li class="listItem">
          <text class="text">详细地址:</text>
          <text class="text">{{sbxq.XZQHMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备序列号:</text>
          <text class="text">{{sbxq.BZ}}</text>
        </li>
        <li class="listItem">
          <text class="text">客户编号:</text>
          <text class="text">{{sbxq.PMTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">外墙保温:</text>
          <text class="text">{{sbxq.WQBW}}</text>
        </li>
        <li class="listItem">
          <text class="text">所属行政区划:</text>
          <text class="text">{{sbxq.XZQHDM}}</text>
        </li>
        <li class="listItem">
          <text class="text">户主姓名:</text>
          <text class="text">{{sbxq.PMTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">采暖末端:</text>
          <text class="text">{{sbxq.CNMD}}</text>
        </li>
        <li class="listItem">
          <text class="text">身份证号:</text>
          <text class="text">{{sbxq.SFZH}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备类型:</text>
          <text class="text">{{sbxq.SBLXMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">联系电话:</text>
          <text class="text">{{sbxq.LXDD}}</text>
        </li>
        <li class="listItem">
          <text class="text">用能主体性质:</text>
          <text class="text">{{sbxq.YNZTXZ}}</text>
        </li>
        <li class="listItem">
          <text class="text">采暖面积/平方米:</text>
          <text class="text">{{sbxq.CNMJ}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装人员:</text>
          <text class="text">{{sbxq.AZRY}}</text>
        </li>
        <li class="listItem">
          <text class="text">计划细类:</text>
          <text class="text">{{sbxq.BYC1}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装人员电话:</text>
          <text class="text">{{sbxq.AZRYDH}}</text>
        </li>
        <li class="listItem">
          <text class="text">常住人数:</text>
          <text class="text">{{sbxq.RS}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备品牌:</text>
          <text class="text">{{sbxq.SBPP}}</text>
        </li>
        <li class="listItem">
          <text class="text">电表号:</text>
          <text class="text">{{sbxq.DBH}}</text>
        </li>
      </ul>
      <ul class="list" v-else-if="type == '2'">
        <li class="listItem">
          <label class="specials">
            <text class="special"></text>
            <text class="textSP">设备详情</text>
          </label>
        </li>
        <li class="listItem">
          <text class="text">设备地点编号:</text>
          <text class="text">{{sbxq.DDID}}</text>
        </li>
        <li class="listItem">
          <text class="text">供暖房间:</text>
          <text class="text">{{sbxq.MQQNFS}}</text>
        </li>
        <li class="listItem">
          <text class="text">设计建议:</text>
          <text class="text">{{sbxq.SJJY}}</text>
        </li>
        <li class="listItem">
          <text class="text">设计图片地址:</text>
          <text class="text">{{sbxq.SJTPATH}}</text>
        </li>
        <li class="listItem">
          <text class="text">设计图片名称:</text>
          <text class="text">{{sbxq.SJTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装状态:</text>
          <text class="text">{{sbxq.ZTBS}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装位置:</text>
          <text class="text">{{sbxq.JZAZWZ}}</text>
        </li>
        <li class="listItem">
          <text class="text">建筑结构:</text>
          <text class="text">{{sbxq.JZJG}}</text>
        </li>
        <li class="listItem">
          <text class="text">水泵型号:</text>
          <text class="text">{{sbxq.SBXH}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装日期:</text>
          <text class="text">{{sbxq.AZRQ}}</text>
        </li>
        <li class="listItem">
          <text class="text">供暖面积:</text>
          <text class="text">{{sbxq.ZJDMJ}}</text>
        </li>
        <li class="listItem">
          <text class="text">平面图名称:</text>
          <text class="text">{{sbxq.PMTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">建筑层高:</text>
          <text class="text">{{sbxq.JZCG}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备型号:</text>
          <text class="text">{{sbxq.SBXHMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">外墙厚度:</text>
          <text class="text">{{sbxq.WQHD}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备ID:</text>
          <text class="text">{{sbxq.SBID}}</text>
        </li>
        <li class="listItem">
          <text class="text">使用能源:</text>
          <text class="text">{{sbxq.SYNYMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">经度:</text>
          <text class="text">{{sbxq.JD}}</text>
        </li>
        <li class="listItem">
          <text class="text">纬度:</text>
          <text class="text">{{sbxq.WD}}</text>
        </li>
        <li class="listItem">
          <text class="text">详细地址:</text>
          <text class="text">{{sbxq.XZQHMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备序列号:</text>
          <text class="text">{{sbxq.BZ}}</text>
        </li>
        <li class="listItem">
          <text class="text">客户编号:</text>
          <text class="text">{{sbxq.PMTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">外墙保温:</text>
          <text class="text">{{sbxq.WQBW}}</text>
        </li>
        <li class="listItem">
          <text class="text">所属行政区划:</text>
          <text class="text">{{sbxq.XZQHDM}}</text>
        </li>
        <li class="listItem">
          <text class="text">户主姓名:</text>
          <text class="text">{{sbxq.PMTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">采暖末端:</text>
          <text class="text">{{sbxq.CNMD}}</text>
        </li>
        <li class="listItem">
          <text class="text">身份证号:</text>
          <text class="text">{{sbxq.SFZH}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备类型:</text>
          <text class="text">{{sbxq.SBLXMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">联系电话:</text>
          <text class="text">{{sbxq.LXDD}}</text>
        </li>
        <li class="listItem">
          <text class="text">用能主体性质:</text>
          <text class="text">{{sbxq.YNZTXZ}}</text>
        </li>
        <li class="listItem">
          <text class="text">采暖面积/平方米:</text>
          <text class="text">{{sbxq.CNMJ}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装人员:</text>
          <text class="text">{{sbxq.AZRY}}</text>
        </li>
        <li class="listItem">
          <text class="text">计划细类:</text>
          <text class="text">{{sbxq.BYC1}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装人员电话:</text>
          <text class="text">{{sbxq.AZRYDH}}</text>
        </li>
        <li class="listItem">
          <text class="text">常住人数:</text>
          <text class="text">{{sbxq.RS}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备品牌:</text>
          <text class="text">{{sbxq.SBPP}}</text>
        </li>
        <li class="listItem">
          <text class="text">电表号:</text>
          <text class="text">{{sbxq.DBH}}</text>
        </li>
        <li class="listItem">
          <text class="text">建筑面积:</text>
          <text class="text">{{sbxq.JZMJ}}</text>
        </li>
        <li class="listItem">
          <text class="text">总户数:</text>
          <text class="text">{{sbxq.BYN2}}</text>
        </li>
      </ul>
      <ul class="list" v-else-if="type == '3'">
        <li class="listItem">
          <label class="specials">
            <text class="special"></text>
            <text class="textSP">设备详情</text>
          </label>
        </li>
        <li class="listItem">
          <text class="text">设备地点编号:</text>
          <text class="text">{{sbxq.DDID}}</text>
        </li>
        <li class="listItem">
          <text class="text">供暖房间:</text>
          <text class="text">{{sbxq.MQQNFS}}</text>
        </li>
        <li class="listItem">
          <text class="text">设计建议:</text>
          <text class="text">{{sbxq.SJJY}}</text>
        </li>
        <li class="listItem">
          <text class="text">设计图片地址:</text>
          <text class="text">{{sbxq.SJTPATH}}</text>
        </li>
        <li class="listItem">
          <text class="text">设计图片名称:</text>
          <text class="text">{{sbxq.SJTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装状态:</text>
          <text class="text">{{sbxq.ZTBS}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装位置:</text>
          <text class="text">{{sbxq.JZAZWZ}}</text>
        </li>
        <li class="listItem">
          <text class="text">建筑结构:</text>
          <text class="text">{{sbxq.JZJG}}</text>
        </li>
        <li class="listItem">
          <text class="text">水泵型号:</text>
          <text class="text">{{sbxq.SBXH}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装日期:</text>
          <text class="text">{{sbxq.AZRQ}}</text>
        </li>
        <li class="listItem">
          <text class="text">供暖面积:</text>
          <text class="text">{{sbxq.ZJDMJ}}</text>
        </li>
        <li class="listItem">
          <text class="text">平面图名称:</text>
          <text class="text">{{sbxq.PMTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">建筑层高:</text>
          <text class="text">{{sbxq.JZCG}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备型号:</text>
          <text class="text">{{sbxq.SBXHMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">外墙厚度:</text>
          <text class="text">{{sbxq.WQHD}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备ID:</text>
          <text class="text">{{sbxq.SBID}}</text>
        </li>
        <li class="listItem">
          <text class="text">使用能源:</text>
          <text class="text">{{sbxq.SYNYMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">经度:</text>
          <text class="text">{{sbxq.JD}}</text>
        </li>
        <li class="listItem">
          <text class="text">纬度:</text>
          <text class="text">{{sbxq.WD}}</text>
        </li>
        <li class="listItem">
          <text class="text">详细地址:</text>
          <text class="text">{{sbxq.XZQHMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备序列号:</text>
          <text class="text">{{sbxq.BZ}}</text>
        </li>
        <li class="listItem">
          <text class="text">客户编号:</text>
          <text class="text">{{sbxq.PMTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">外墙保温:</text>
          <text class="text">{{sbxq.WQBW}}</text>
        </li>
        <li class="listItem">
          <text class="text">所属行政区划:</text>
          <text class="text">{{sbxq.XZQHDM}}</text>
        </li>
        <li class="listItem">
          <text class="text">户主姓名:</text>
          <text class="text">{{sbxq.PMTFILENAME}}</text>
        </li>
        <li class="listItem">
          <text class="text">采暖末端:</text>
          <text class="text">{{sbxq.CNMD}}</text>
        </li>
        <li class="listItem">
          <text class="text">身份证号:</text>
          <text class="text">{{sbxq.SFZH}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备类型:</text>
          <text class="text">{{sbxq.SBLXMC}}</text>
        </li>
        <li class="listItem">
          <text class="text">联系电话:</text>
          <text class="text">{{sbxq.LXDD}}</text>
        </li>
        <li class="listItem">
          <text class="text">用能主体性质:</text>
          <text class="text">{{sbxq.YNZTXZ}}</text>
        </li>
        <li class="listItem">
          <text class="text">采暖面积/平方米:</text>
          <text class="text">{{sbxq.CNMJ}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装人员:</text>
          <text class="text">{{sbxq.AZRY}}</text>
        </li>
        <li class="listItem">
          <text class="text">计划细类:</text>
          <text class="text">{{sbxq.BYC1}}</text>
        </li>
        <li class="listItem">
          <text class="text">安装人员电话:</text>
          <text class="text">{{sbxq.AZRYDH}}</text>
        </li>
        <li class="listItem">
          <text class="text">常住人数:</text>
          <text class="text">{{sbxq.RS}}</text>
        </li>
        <li class="listItem">
          <text class="text">设备品牌:</text>
          <text class="text">{{sbxq.SBPP}}</text>
        </li>
        <li class="listItem">
          <text class="text">电表号:</text>
          <text class="text">{{sbxq.DBH}}</text>
        </li>
        <li class="listItem">
          <text class="text">配套设施投资:</text>
          <text class="text">{{sbxq.BYN3}}</text>
        </li>
        <li class="listItem">
          <text class="text">建筑面积:</text>
          <text class="text">{{sbxq.JZMJ}}</text>
        </li>
      </ul>
    </div>
    <div class="pic">
      <scroller class="picList" scroll-direction="horizontal">
        <li class="picListItem" v-for="(item, index) in imgArr" :key="'image' + index">
          <image class="pics" @click="clickImg($event)" :src="item.result.data"></image>
        </li>
      </scroller>
    </div>
    </scroller>
    <bigImg v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></bigImg>
  </div>
</template>
<script>
import bigImg from '@/components/details/deviceManagement/picEnlarge.vue';
import event from '@/net/event.js';
import { getCache } from '@/util/storageUtils.js';
import { CTCE_SBXQ, CTCE_INSTALL_TYPE, CTCE_SBID_TYPE } from '@/config/storageTypes.js';
export default {
  name: 'deviceDetails',
  data () {
    return {
      showImg: false,
      imgSrc: '',
      src: '',
      sbxq: {},
      type: '',
      imgArr: []
    }
  },
  components: {
    bigImg
  },
  beforeCreate () {
    this.$notice.loading.show()
  },
  created () {
    this.$navigator.setNavigationInfo({
        title: '设备详情',
        navShow: true,
        statusBarStyle: 'LightContent'
    })

    Promise.all([getCache(CTCE_SBXQ), getCache(CTCE_SBID_TYPE)]).then(res => {
      const sbxq = JSON.parse(res[0])
      let ajax = []
      this.sbxq = sbxq
      this.data = JSON.parse(res[1])

      if (sbxq.PMTPATH !== '') {
        ajax.push(event.showImagesSb(this.data.sbid, this.data.type, '1', '1', '1'))
      }

      if (sbxq.SJTPATH !== '') {
        ajax.push(event.showImagesSb(this.data.sbid, this.data.type, '2', '1', '1'))
      }

      for (let i = 1; i < 7; i++) {
        if (sbxq['AZTPATH' + i] !== '') {
          ajax.push(event.showImagesSb(this.data.sbid, this.data.type, '3', '1', i))
        }
      }

      Promise.all(ajax).then(res => {
        this.imgArr = res
        this.$nextTick(() => {
          this.$notice.loading.hide()
        })
      })      
    })
    
  },
  mounted () {
    getCache(CTCE_INSTALL_TYPE).then(res => {
      this.type = JSON.parse(res)
    })
  },
  methods: {
    clickImg(e) {
      this.showImg = true;
      // 获取当前图片地址
      this.imgSrc = e.currentTarget.attr.src;
    },
    viewImg(){
      this.showImg = false;
    }
  }
}
</script>
<style scoped>
.deviceDetails{
  width: 750px;
  flex: 1;
  margin-bottom: 65px;
}
.listContent{
  width: 750px;
  /* height: 708.3px; */
  padding-left: 18.7px;
  padding-right: 18.7px;
  margin-top: 10px;
  box-shadow: 0px -0.5px 2px 0px rgba(204,204,204,1);
}
.list{
  width: 708.3px;
  /* height: 708.3px; */
  padding: 10px;
}
.listItem{
  width: 692.6px;
  height: 70px;
  border-bottom-color: #ccc;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.specials{
  display: inline-block;
  width: 148px;
  height: 70px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.special {
  display: inline-block;
  border-left-color: rgba(62,175,252,1);
  border-left-style: solid;
  border-left-width: 11px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.text{
  display: inline-block;
  font-size: 29.1px;
  font-family:PingFangSC-Regular;
  color:rgba(102,102,102,1);
}
.textSP{
  font-size: 29.1px;
  font-family:PingFangSC-Semibold;
  color:rgba(102,102,102,1);
}
.pic{
  width: 750px;
  height: 162.5px;
  padding-left: 18.7px;
  padding-right: 18.7px;
  margin-top: 27px;
  margin-bottom: 35px;
}
.picList{
  width: 708.3px;
  height: 162.5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.picListItem{
  width: 220.8px;
  height: 162.5px;
}
.pics{
  width: 220px;
  height: 162.5px;
  display: inline-block;
  border-radius: 10px;
}
[v-cloak] {
  display: none;
}
</style>
